import { Button, ButtonVariants } from '@/shared/ui';

import { ReactComponent as ShareIconMobile } from '../../icons/share-icon-mobile.svg';
import { ReactComponent as ShareIcon } from '../../icons/share-icon.svg';
import { useShare } from '../../model/useShare';
import cs from './OpenShareModalButton.module.scss';

export const OpenShareModalButton = ({ variant = 'icon', data }: { variant?: 'icon' | 'big'; data?: ShareData }) => {
  const handleClick = useShare(data);

  return {
    icon: (
      <Button data-testid="button-modal-share" onClick={handleClick} variant={ButtonVariants.Icon}>
        <ShareIcon />
      </Button>
    ),
    big: (
      <Button className={cs.gray} data-testid="button-modal-share" onClick={handleClick} variant={ButtonVariants.Gray}>
        <div className={cs.icon}>
          <ShareIcon />
        </div>
        <div>
          <ShareIconMobile className={cs.icon_mobile} />
        </div>
        Поделиться
      </Button>
    ),
  }[variant];
};
